<template>
  <div class="myhome">
    <van-nav-bar :title="user.name" left-text=""  @click-left="onClickLeft" left-arrow>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-row>
      <van-col span="7">
        <img class="user-icon" :src="user.icon" alt="" />
      </van-col>
      <van-col span="17">
        <van-row>
          <van-col span="6">
            <span class="span-num">{{huozan}}</span>
            <span class="span-class">获赞</span>
          </van-col>
          <van-col span="6">
            <span class="span-num">{{fans}}</span>
            <span class="span-class">粉丝</span>
          </van-col>
          <van-col span="6">
            <span class="span-num">{{attention}}</span>
            <span class="span-class">关注</span>
          </van-col>
         
        </van-row>
      </van-col>
 
      <router-link to="/edit"><button>编辑资料</button></router-link>
    </van-row>
    <p class="user-sign">{{user.sign}}</p>
    <van-tag color="gray" round plain type="primary">{{user.address}}</van-tag>
    <van-tag color="gray" round plain type="primary">{{user.sex}}</van-tag>
    <hr style="color:lightgray">
    <van-tabs v-model="active">
      <van-tab title="全部">
      </van-tab>
      <van-tab title="帖子">
        <post :tab_id="1"></post>
      </van-tab>
      <van-tab title="评论">
        <postComment :tab_id="2"></postComment>
      </van-tab>
      <van-tab title="插眼">插眼</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import router from "../../router"
import axios from "axios"
import post from "@/views/my/post"
import postComment from "@/views/my/postComment"
export default {
  name: "myHome",
  components:{
    post,
    postComment
  },
  methods: {
    onClickLeft() {
      history.back();
    },
  },
  data(){
    return{
      user:[],
      active:1,
      fans:'-',
      attention:'-',
      huozan:'-',
    }
  },
  methods:{
    onClickLeft() {
      router.go(-1);
    },
  },
created(){
   let user_id=localStorage.getItem('user_id')
    axios.get("http://localhost:3000/get_user",{
        params:{
         id:user_id
        } 
      })
      
      .then((res)=> {
        res=res.data.data
        this.user=res.userlist[0]
        this.fans=res.fans
        this.attention=res.attention
        this.huozan=res.huozan   
      });
  }
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar{
    border: 0 solid #ffffff;
}

/deep/.van-icon-arrow-left::before,
.van-icon-search::before {
  color: black;
}
/deep/ .van-nav-bar__title {
  font-weight: bold;
  font-size: 18px;
}
/deep/.van-row{
  margin-top: 10px;
  margin-left: 10px;
}

.user-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-top: 20px;
}
/deep/ .van-col {
  display: flex;
  flex-direction: column;
}
.span-num{
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;
}
.span-class{
  font-size: 10px;
}
button{
width: 250px;
height: 30px;
margin-top: 20px;
background: white;
color: #ff7373;
border-radius: 5px;
border: 1px solid #ff7373;
}
.user-sign{
  font-family: monospace sans-serif;
  font-size: 12px;
  color:rgb(66, 54, 54);
  margin: 10px;
}
/deep/.van-tag{
  margin: 5px 5px 5px 10px;
}
/deep/.van-tabs__wrap{
  margin-left: 40px;
  margin-right: 40px
}
</style>